<template>
	<view class="content">
		<view class="swiper-banner">
			<u-swiper :list="list" @click='clickSwiper'></u-swiper>
		</view>
		<view @click="toMap">map</view>
		<view class="search-input">
			<text @click="openCode(1)">关注公众号</text>
			<u-search shape="round" placeholder="请搜索房源。" v-model="queryForm.keywords" @custom='searchQuery'></u-search>
		</view>
		<view class="house-type-box">
			<view class="type-item" :class="item.selected ? 'type-select' : ''" v-for="item in houseTypeList"
				:key="item.id" @click="selectType(item)">
				{{item.name}}
				<view class="under-line" v-if="item.selected"></view>
			</view>
		</view>
		<view class="fixed-box" @click="openCode(2)">
			客服
		</view>
		<view class="filter-box" :class="activeClassName">
			<u-dropdown ref="uDropdown">
				<u-dropdown-item :customStyle="{color:'red'}" v-model="queryForm.area" title="区域" :options="areaRange"
					@change="areaChange"></u-dropdown-item>
				<u-dropdown-item title="价格">
					<view class="slot-content">
						<view class="price-input">
							<text>范围：</text>
							<u-input v-model="queryForm.priceStart" type="text" placeholder="最小价格" />~
							<u-input v-model="queryForm.priceEnd" type="text" placeholder="最大价格" />
						</view>
						<view class="price-tags">
							<u-tag text="500元以下" shape="circle" size='mini' @click="typeClick('0','499')" />
							<u-tag text="500元-1000元" shape="circle" size='mini' @click="typeClick('500','1000')" />
							<u-tag text="1000元-2000元" shape="circle" size='mini' @click="typeClick('1000','2000')" />
							<u-tag text="2000元以上" shape="circle" size='mini' @click="typeClick('2001','99999')" />
						</view>
						<u-button type="primary" @click="closeDropdown">确定</u-button>
					</view>
				</u-dropdown-item>
				<u-dropdown-item v-model="queryForm.isAgency" title="中介费" :options="agencyFeeRange"
					@change="areaChange"></u-dropdown-item>
				<u-dropdown-item v-model="queryForm.sort" title="排序" :options="sortRange"
					@change="areaChange"></u-dropdown-item>
			</u-dropdown>
			<view class="clear-fillter" @click="clear">清除筛选</view>
		</view>
		<u-waterfall ref="uWaterfall" v-model="flowList">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="gotoDetail(item)">
					<u-lazy-load threshold="-450" height='240' img-mode='scaleToFill' border-radius="10"
						:image="item.images[0]" error-img="../../static/noneBG.jpg" :index="index"></u-lazy-load>
					<!-- <image :src="item.postUrl || '../../static/noneBG.jpg'" mode=""></image> -->
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-bottom">
						<view class="demo-price">
							{{item.price}}元/月
						</view>
						<!-- <view class="demo-btn" v-if="userType == 1">租房下单</view> -->
						<view class="demo-btn" v-if="userType != 1">佣金:￥{{item.commission}}</view>
					</view>
					<view class="demo-type">
						{{item.tags}}
					</view>
					<view class="demo-top" v-if="item.isTop == 1">
						置顶
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="gotoDetail(item)">
					<u-lazy-load threshold="-450" height='240' img-mode='scaleToFill' border-radius="10"
						:image="item.images[0]" error-img="../../static/noneBG.jpg" :index="index"></u-lazy-load>
					<!-- <image :src="item.postUrl ||'../../static/noneBG.jpg'" mode=""></image> -->
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-bottom">
						<view class="demo-price">
							{{item.price}}元/月
						</view>
						<!-- <view class="demo-btn" v-if="userType == 1">租房下单</view> -->
						<view class="demo-btn" v-if="userType != 1">佣金:￥{{item.commission}}</view>
					</view>
					<view class="demo-type">
						{{item.tags}}
					</view>
					<view class="demo-top" v-if="item.isTop == 1">
						置顶
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addData"></u-loadmore>
		<Tabbar :tabbarCurrent="tabbarCurrent"></Tabbar>
	</view>
</template>

<script>
	import {
		GetHouseListByPage,
		GetAdvertisement
	} from "@/api/index.js"
	export default {
		data() {
			return {
				//没有清除
				isClear: false,
				tabbarCurrent: 0,
				errorImg: '@/static/noneBG.jpg',
				userType: 1,
				loadStatus: 'loadmore',
				flowList: [],
				sortRange: [{
						value: 1,
						label: "最新发布"
					},
					{
						value: 2,
						label: "佣金从高到低"
					},
					{
						value: 3,
						label: "租金从低到高"
					},
				],
				queryForm: {
					priceStart: '',
					priceEnd: '',
					pageSize: 9999,
					pageNum: 1,
					keywords: "",
					sort: 0,
					tags: "",
					area: "",
					isAgency: "",
					auditStatus: "2",
					price: {
						">=": "",
						"<=": "",
						"=": "",
						"<": "",
						">": ""
					},
					openId: ""
				},
				// 区域列表
				areaRange: [{
						value: "南明区",
						label: "南明区"
					},
					{
						value: "云岩区",
						label: "云岩区"
					},
					{
						value: "观山湖区",
						label: "观山湖区"
					},
					{
						value: "乌当区",
						label: "乌当区"
					},
					{
						value: "白云区",
						label: "白云区"
					},
					{
						value: "花溪区",
						label: "花溪区"
					}
				],
				// 中介费列表
				agencyFeeRange: [{
						value: 1,
						label: "有中介费"
					},
					{
						value: 0,
						label: "无中介费"
					},
				],
				// 户型列表
				houseTypeList: [{
						id: 0,
						name: '全部',
						selected: true
					},
					{
						id: 1,
						name: '合租单间',
						selected: false
					},
					{
						id: 2,
						name: '单间带卫浴',
						selected: false
					},
					{
						id: 3,
						name: '一室一厅',
						selected: false
					},
					{
						id: 4,
						name: '二室一厅',
						selected: false
					},
					{
						id: 5,
						name: '三室一厅',
						selected: false
					},
					{
						id: 6,
						name: '四室以上',
						selected: false
					},
					{
						id: 7,
						name: '公寓',
						selected: false
					}
				],

				list: []
			}
		},
		onLoad(op) {
			this.getAd()
			if (op) {
				this.queryForm = {
					priceStart: '',
					priceEnd: '',
					pageSize: 9999,
					pageNum: 1,
					keywords: "",
					sort: 0,
					tags: "",
					area: "",
					isAgency: "",
					auditStatus: "2",
					price: {
						">=": "",
						"<=": "",
						"=": "",
						"<": "",
						">": ""
					},
					openId: op.openId
				}
			}
		},
		computed: {
			activeClassName() {
				let classList = {
					"price": false,
					"zhongjie": false,
					"area": false,
					"sort": false
				};
				if (!this.isClear) {
					//区域
					classList.area = Boolean(this.queryForm.area)
					//价格
					classList.price = Boolean(this.queryForm.priceStart)
					//中介费
					classList['zhongjie'] = Boolean(this.queryForm.isAgency !== '')
					//排序
					classList['sort'] = Boolean(this.queryForm['sort'])
				}
				return classList
			}
		},
		async onShow() {
			let that = this
			that.$nextTick(() => {
				that.$refs.uWaterfall.clear()
			})
			await that.clear()
			// await that.addData();
		},
		onReachBottom() {
			let that = this
			that.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {

				that.addData();
				that.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			toMap(){
				uni.navigateTo({
					url:'/pages/map/index'
				})
			},
			clickSwiper(index) {
				window.location.href = this.list[index].link
			},
			openCode(type) {
				let arr = []
				if (type == 1) {
					arr = ['../../static/code.jpg']
				} else {
					arr = ['../../static/code1.jpg']
				}
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			// 获取广告
			getAd() {
				let that = this
				GetAdvertisement({
					type: 1
				}).then(res => {
					that.list = res.data
				})
			},
			init() {
				// this.queryForm.openId = uni.getStorageSync('userInfo').openId
				this.userType = uni.getStorageSync('USER_TYPE')
			},
			clear() {
				this.queryForm = {
					priceStart: '',
					priceEnd: '',
					pageSize: 9999,
					pageNum: 1,
					keywords: "",
					sort: 0,
					tags: "",
					area: "",
					isAgency: "",
					auditStatus: "",
					price: {
						">=": "",
						"<=": "",
						"=": "",
						"<": "",
						">": ""
					},
					openId: ""
				}
				this.isClear = true;
				this.addData()
			},
			areaChange(val) {
				this.isClear = false
				this.$refs.uWaterfall.clear()
				this.addData()
			},
			typeClick(start, end) {
				this.queryForm.price['<='] = end
				this.queryForm.price['>='] = start
				this.queryForm.priceStart = start
				this.queryForm.priceEnd = end
			},
			searchQuery() {
				this.$nextTick(() => {
					this.$refs.uWaterfall.clear()
				})
				this.addData()
			},
			addData() {
				let that = this
				that.init();
				GetHouseListByPage(that.queryForm).then(res => {
					that.flowList = res.data.records
					that.flowList.forEach(item => {
						item.images = item.images.split(',')
						const extIndex = item.images[0].lastIndexOf('.');
						const extName = item.images[0].slice(extIndex + 1)
						if (extName == 'mp4' || extName == 'mov') {
							item.images[0] = '../../static/noneBG.jpg'
						}
					})
					// that.$forceUpdate()
				})
			},
			gotoDetail(item) {
				if (!uni.getStorageSync('isLogin')) {
					uni.showModal({
						title: '提示',
						content: '请先登录后查看房源信息',
						success: function(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/login/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					return
				}
				uni.navigateTo({
					url: '/pages/houseDetail/index?id=' + item.id
				})
			},
			// 选择房源类型
			selectType(item) {
				this.houseTypeList.map(ele => {
					ele.selected = false
					item.selected = true
				})
				this.queryForm.tags = item.name
				if (item.name == '全部') {
					this.queryForm.tags = ''
				}
				this.$refs.uWaterfall.clear()
				this.addData()
			},
			change(e) {
				console.log("e:", e);
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
				this.$refs.uWaterfall.clear()
				this.addData()
			}
		}
	}
</script>

<style lang="scss">
	.uni-select {
		background-color: #fff;
	}

	/deep/ .u-cell {
		font-size: 26rpx !important;
		padding: 10rpx 20rpx !important;
	}

	/deep/ .u-dropdown__menu {
		height: 50rpx !important;
	}

	/deep/ .u-dropdown__content {
		top: 30px !important;
	}

	.type-select {
		color: #1296db;
		font-weight: bold;
		// border-bottom: #1296db 5rpx solid;
	}

	.swiper-banner {
		width: 100%;
	}

	.search-input {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;

		>text {
			padding: 10rpx;
			background-color: #1296db;
			color: #FFFFFF;
			border-radius: 10rpx;
			font-size: 24rpx;
		}
	}

	.house-type-box {
		width: 95%;
		margin: 20rpx auto;
		border: 1rpx solid #b4b4b4;
		border-radius: 15rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 15rpx;
		background-color: #fff;

		.type-item {
			text-align: center;
			width: 25%;
			// margin-bottom: 30rpx;
			margin: 15rpx 0;
			position: relative;

			.under-line {
				position: absolute;
				bottom: -10rpx;
				width: 100rpx;
				height: 5rpx;
				left: 22%;
				background-color: #1296db;
			}
		}
	}

	.area {
		/deep/ .menu__item__text_0 {
			color: red !important;
		}
	}

	.price {
		/deep/ .menu__item__text_1 {
			color: red !important;
		}
	}

	.zhongjie {
		/deep/ .menu__item__text_2 {
			color: red !important;
		}
	}

	.sort {
		/deep/ .menu__item__text_3 {
			color: red !important;
		}
	}

	.filter-box {
		width: 95%;
		margin: 0rpx auto;
		display: flex;
		align-items: center;

		.clear-fillter {
			font-size: 24rpx;
			padding: 3rpx 6rpx;
			color: #fff;
			background-color: #1296db;
			border-radius: 10rpx;
		}

		.slot-content {
			background-color: #fff;
			padding: 20rpx;

			.price-input {
				display: flex;
				align-items: center;

				/deep/ .u-input {
					width: 200rpx;
				}
			}

			.price-tags {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 20rpx;
			}
		}

	}


	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		// padding: 8px;
		position: relative;


		>image {
			height: 250rpx;
			width: 250rpx;
			border-radius: 5rpx;
		}
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 26rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.demo-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 5px;
		padding: 5rpx;

		.demo-btn {
			padding: 5rpx 10rpx;
			font-size: 24rpx;
			background-color: #d65128;
			border-radius: 15rpx;
			color: #fff;
		}

	}

	.demo-type {
		position: absolute;
		top: 30rpx;
		left: 0rpx;
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		background-color: #d65128;
		border-bottom-right-radius: 15rpx;
		border-top-right-radius: 15rpx;
		color: #fff;
	}

	.demo-top {
		position: absolute;
		top: 30rpx;
		right: 0rpx;
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		background-color: #d65128;
		border-bottom-left-radius: 15rpx;
		border-top-left-radius: 15rpx;
		color: #fff;
	}

	.fixed-box {
		z-index: 999;
		position: fixed;
		right: 20rpx;
		bottom: 30%;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #1296db;
		color: #FFFFFF;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>